<template>
	<view class="order tn-safe-area-inset-bottom">


		<view class="tn-padding-bottom-lg" >
			<view class="tn-strip-bottom"></view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm">
				<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
					商品管理
				</view>
			</view>

			<view class="tn-flex tn-flex-wrap tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
				<view v-for="(item, index) in attendance" :key="index" style="width: 25%;">
					<view class="tn-margin-bottom tn-margin-top-sm" @click="tn(item.url)">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<!-- 当然，如果你有图片，可以换成图片模式 -->
							<!-- <view class="icon13__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.img +');background-size:100% 100%;background-size: cover;'">
			            </view> -->
							<view
								class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
								:style="'background-color:'+ item.color +';'">
								<view :class="[`tn-icon-${item.icon}`]"
									style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">
									
								</view>
							</view>
							<view class="tn-color-gray--dark tn-text-center tn-text-df">
								<text class="tn-text-ellipsis">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tn-strip-bottom"></view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm">
				<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
					基本资料
				</view>
			</view>
			
			<view class="tn-flex tn-flex-wrap tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
				<view v-for="(item, index) in attendance1" :key="index" style="width: 25%;">
					<view class="tn-margin-bottom tn-margin-top-sm" @click="tn(item.url)">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<!-- 当然，如果你有图片，可以换成图片模式 -->
							<!-- <view class="icon13__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.img +');background-size:100% 100%;background-size: cover;'">
			            </view> -->
							<view
								class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
								:style="'background-color:'+ item.color +';'">
								<view :class="[`tn-icon-${item.icon}`]"
									style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">
									
								</view>
							</view>
							<view class="tn-color-gray--dark tn-text-center tn-text-df">
								<text class="tn-text-ellipsis">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="tn-strip-bottom"></view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm">
				<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
					项目资料
				</view>
			</view>
			
			<view class="tn-flex tn-flex-wrap tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
				<view v-for="(item, index) in attendance2" :key="index" style="width: 25%;">
					<view class="tn-margin-bottom tn-margin-top-sm" @click="tn(item.url)">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<!-- 当然，如果你有图片，可以换成图片模式 -->
							<!-- <view class="icon13__item--icon tn-flex tn-flex-row-center tn-flex-col-center" :style="'background-image:url('+ item.img +');background-size:100% 100%;background-size: cover;'">
			            </view> -->
							<view
								class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white"
								:style="'background-color:'+ item.color +';'">
								<view :class="[`tn-icon-${item.icon}`]"
									style="text-shadow: 5rpx 8rpx 10rpx rgba(0,0,0,0.16);transform: rotate(19deg);">
									
								</view>
							</view>
							<view class="tn-color-gray--dark tn-text-center tn-text-df">
								<text class="tn-text-ellipsis">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="tn-strip-bottom"></view>
		</view>
		<view class='tn-tabbar-height'></view>


	</view>
</template>

<script>
	export default {
		name: 'Comm',
		data() {
			return {
				attendance: [{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764808285-assets/web-upload/b83d1b36-7355-4f36-bc02-9f06b8c0867c.png",
						title: "商品管理",
						icon: 'buy-fill',
						color: '#4B98FE',
						url: "/workPages/charts"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "商品类别",
						icon: 'menu-circle-fill',
						color: '#00B9FE',
						url: "/workPages/charts"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "计量单位",
						icon: 'count-fill',
						color: '#4081c1',
						url: "/workPages/client"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765049011-assets/web-upload/e49243fa-5182-4fbb-a850-33e927316a90.png",
						title: "多属性",
						icon: 'more-circle-fill',
						color: '#0099e5',
						url: "/homePages/nav"
					}
				],
				attendance1: [{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764808285-assets/web-upload/b83d1b36-7355-4f36-bc02-9f06b8c0867c.png",
						title: "供应商信息",
						icon: 'company-fill',
						color: '#366eb8',
						url: "/minePages/machine"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "客户管理",
						icon: 'ai-fill',
						color: '#4B98FE',
						url: "/minePages/client"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "会员信息",
						icon: 'vip-fill',
						color: '#ffaa00',
						url: "/minePages/client"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765049011-assets/web-upload/e49243fa-5182-4fbb-a850-33e927316a90.png",
						title: "仓库信息",
						icon: 'server-fill',
						color: '#00aaff',
						url: "/minePages/machine"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765049011-assets/web-upload/e49243fa-5182-4fbb-a850-33e927316a90.png",
						title: "收支项目",
						icon: 'pay-fill',
						color: '#aaaaff',
						url: "/homePages/nav"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765049011-assets/web-upload/e49243fa-5182-4fbb-a850-33e927316a90.png",
						title: "结算账户",
						icon: 'piggy-bank-fill',
						color: '#ffaa7f',
						url: "/homePages/nav"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765049011-assets/web-upload/e49243fa-5182-4fbb-a850-33e927316a90.png",
						title: "手办人管理",
						icon: 'my-job-fill',
						color: '#55557f',
						url: "/homePages/nav"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765049011-assets/web-upload/e49243fa-5182-4fbb-a850-33e927316a90.png",
						title: "角色管理",
						icon: 'my-lack-fill',
						color: '#316394',
						url: "/homePages/nav"
					}
				],
				attendance2: [{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666764808285-assets/web-upload/b83d1b36-7355-4f36-bc02-9f06b8c0867c.png",
						title: "项目立项",
						icon: 'block-fill',
						color: '#CC52E2',
						url: "/minePages/file"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "文档资料",
						icon: 'folder-fill',
						color: '#00D05E',
						url: "/minePages/file"
					},
					{
						img: "https://cdn.nlark.com/yuque/0/2022/png/280373/1666765211148-assets/web-upload/bc9ff0e7-36a5-4d99-8698-cd589b00dc99.png",
						title: "合同文件",
						icon: 'folder-fill',
						color: '#3e7dbc',
						url: "/minePages/file"
					},
				]
			}
		},
		onLoad() {

		},
		/* 瀑布流*/
		created() {

		},
		methods: {
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.order{
		background-color: #fff;
	}
	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid #F8F7F8;
	}

	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F7F8;
	}

	/* 新增OA色系，自行调用，或者拿色值去用，多种方式*/
	.oa-black {
		color: #1D2541;
	}

	.oa-blue {
		color: #4B98FE;
	}

	.oa-orangeyellow {
		color: #FFAC00;
	}

	.oa-green {
		color: #00D05E;
	}

	.oa-orange {
		color: #FE871B;
	}

	.oa-cyan {
		color: #00C8B0;
	}

	.oa-indigo {
		color: #00B9FE;
	}

	.oa-orangered {
		color: #FB6A67;
	}

	.oa-purple {
		color: #957BFE;
	}

	.icon12 {
		&__item {
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 56rpx;
				transform: rotate(-19deg);
				border-radius: 43% 57% 43% 57% / 57% 43% 57% 43%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1) rotate(19deg);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);
				}
			}

		}
	}
</style>
